<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构伪类选择器</title>
		<style>
			ul li:first-child {
				background-color: blue;
			}
			ul li:last-child {
				background-color: red;
			}
			ul li:nth-child(3) {
				background-color: skyblue;
			}
			/* nth-child里边的参数n，应该是选择全部的意思 */
			/* n其实是从0开始的 n+1表示的是从第一个开始*/
			/* n+2代表着从第2个开始，直到最后 */
			/* 这个参数必须是n，别的字母不行 */
			/* ol li:nth-child(n+2) {
				background-color: yellow;
			} */
			/* 2n就是偶数的意思 */
			/* ol li:nth-child(2n) {
				background-color: yellowgreen;
			} */
			/* 2n+1代表的就是奇数 */
			/* ol li:nth-child(2n+1) {
				background-color: yellow;
			} */
			
			/* 奇数和偶数的简化写法 */
			/* ol li:nth-child(even) {
				background-color: yellowgreen;
			} 
			ol li:nth-child(odd) {
				background-color: red;
			} */
			/* 前边的几个 */
			ol li:nth-child(-n+3) {
				background-color: rosybrown;
			}
			
			/* div div:first-child {
				background-color: teal;
			} */
			div p:first-of-type {
				background-color: teal;
			}
			div div:last-of-type {
				background-color: darkblue;
			}
			div div:nth-of-type(n) {
				background-color: antiquewhite;
			}
			div p:nth-of-type(2) {
				background-color: darkgreen;
			}
			/* 关于权重的问题 */
			/* 结构伪类的权重是0,0,1,0 */
			/* 标签选择器的权重是 0,0,0,1 */
			/* 最终div div:nth-of-type(n) 的权重应该是0,0,1,2 */
			
			/* 总结：
			 child和type的区别
			 child代码在运行时，先看的时选择第几个孩子first-child代表第一个孩子
			 然后看前边的选择器div，发现第一个孩子不是div，然后就没选择上
			 也就是当我们使用child相关的选择器的时候，会把所有的子标签进行从0
			 开始的编号
			 
			 type代码在运行时，它会把所有同类型的标签进行编号
			 也就是说p是，到div的时候重新进行编号，div也分1、2、3
			 
			 */
			
		</style>
	</head>
	<body>
		<ul>
			<li>我是老大</li>
			<li>我是老二</li>
			<li>我是老三</li>
			<li>我是老四</li>
			<li>我是老五</li>
			<li>我是老六</li>
			<li>我是老七</li>
			<li>我是老八</li>
			<li>我是老九</li>
		</ul>
		<ol>
			<li>我是老大</li>
			<li>我是老二</li>
			<li>我是老三</li>
			<li>我是老四</li>
			<li>我是老五</li>
			<li>我是老六</li>
			<li>我是老七</li>
			<li>我是老八</li>
			<li>我是老九</li>
		</ol>
		
		<div>
			<p>我是第一个段落标签</p>
			<div>我是第一个div</div>
			<div>我是第二个div</div>
			<div>我是第三个div</div>
			<p>我是第2个段落标签</p>
		</div>
		
	</body>
</html>